@charset "utf-8";

$font12:12px;
$font16:16px;
$font14:14px;
$balck:#000000;
@mixin whb($width,$height,$bg){width: $width;height:$height;background: $bg;}
@mixin wh($width,$height){width: $width;height:$height;}
@mixin LH($line-height,$height){line-height: $line-height;height: $height;}
@mixin after($p,$b,$l,$mg,$d,$bt,$bl,$br){
    position:$p;bottom:$b;left:$l;margin-left:$mg;display:$d;border-top:$bt;border-left:$bl;border-right:$br;
}
.clearfix:after{
    content: "";
    display: block;
    clear: both;
}
body{min-width: 1280px;}
#web{@include wh(100%,100%);
    header{width: 100%;
        .top{background: #dfdfde;
             @include LH(40px,40px);
            .main{width: 995px; margin: 0 auto; 
                    a{ color:$balck;
                    font-size: $font14;
                    margin-left: 25px;
                    transition: all 1s;}
                    a:hover{
                        font-weight: bold;
                        color: #2395CB;
                    }
                    }}}  
    nav{@include wh(995px,96px);
    margin: 0 auto;
        .logo{display: inline-block;
           @include wh(304px,96px);
           transition: 3s;
                img{@include wh(100%,100%); }}
         .logo:hover{transform: rotateX(180deg);
         }
                }
/*导航部分*/
    nav ul { width: 600px;
            li{padding-top: 28px;
                float: left;
                @include wh(85px,96px);
                line-height: 24px;
                text-align: center;
                color:$balck;
                font-weight: bold;
                font-size:$font14;
                box-sizing: border-box;      }}
        nav ul li a{ color:$balck;}
        nav ul li:hover,nav ul li.active{background: #faf8f8;
                                         border-bottom: 3px solid #3c9cd3;}

/*轮播*/
.carou {position: relative;
        .lb{@include wh(100%,545px);
                img{@include wh(100%,100%);}}
          .point{ @include wh(100px,10px);
                position: absolute;
                left: 50%;
                bottom: 28px;
                margin-left: -50px;
                    li{@include whb(10px,10px,#a3d3e9);
                        border-radius: 50%;
                        float: left;
                        margin-right: 20px;}
                    li:last-child{ margin-right: 0;}}}
.bgcolor{background: #f6f6f6;}
.product{width: 1000px;margin: 0 auto;margin-top: 63px;
         .item{@include whb(315px,473px,#FFFFFF);margin-left: 9px;box-shadow: 5px 5px 12px #C4C4C4;
                .news-center{@include whb(100%,152px,#2395cb);padding-top: 15px;position: relative;     
                    .backgrond{@include whb(53px,53px,url(../img/index/news-pic1.png));margin: 0 auto;}
                             p{text-align: center;line-height: 33px;color: #f6f6f6;font-size: $font16;}
                        .underline{width: 106px;border: 1px solid #f6f6f6;margin: 0 auto; }}
                .news-center::after{ @include after(absolute,-21px,50%,-21px,block,21px #2395cb solid,21px solid transparent,21px solid transparent);content: '';}
                .news-contant{@include wh(315px,179px);display: block;
                            p{ display:block;font-size: $font14;color: $balck;margin-left: 16px;padding-top: 30px; }
                            .news-contant-img{@include wh(111px,98px);margin-top: 17px;margin-left: 16px;img{ @include wh(100%,100%);}}
                             .news-contant-text{ @include wh(124px,98px);margin-top: 16px;margin-left: 26px;span{font-size: $font14;line-height: 26px;}}} 
                .news-ul ul{padding-top: 18px;margin-left: 18px;
                        li{line-height: 24px;font-size: $font14;list-style:disc;color: #2395cb;}
                         a{color:$balck ;font-size: $font14;}
                                    a:hover{color: #2395cb;text-decoration: underline;}}
}
/*新品发布*/
                .item2{@include whb(312px,473px,#FFFFFF);
                    margin-left: 16px;  
                    box-shadow: 5px 5px 12px #C4C4C4;
                        .news-center2{@include whb(100%,152px,#3ed1a4);
                            padding-top: 15px;
                            background: #3ed1a4;
                            position: relative;
                            .backgrond2{@include whb(53px,53px,url(../img/index/news-pic2.png));margin: 0 auto; }
                             p{text-align: center;line-height: 33px;color: #f6f6f6;font-size: $font14;}
                            .underline2{width: 106px;border: 1px solid #f6f6f6;margin: 0 auto;}}
                        .news-center2::after{@include after(absolute,-21px,50%,-21px,block,21px #3ed1a4 solid,21px solid transparent,21px solid transparent);content: '';}
                        .new-pro{@include wh(312px,218px);position: relative;
                             .new-pro-img{@include wh(218px,140px);margin: 0 auto;padding-top: 47px;
                                        img{@include wh(100%,100%);}}  
                            .prevBtn{display: block;position: absolute;left: 0;top:117px;}
                            .nextBtn{ display: block;position: absolute;left: 288px;top:117px;}}
                        .new-pro-text{@include wh(100%,88px); line-height: 34px;
                            p{text-align: center;color: #2395cb;font-size:$font14;}
                           small{display: block;width: 216px;margin: 0 auto;font-size:$font12;}}}                 
/*品牌介绍*/
        .item3{@include whb(317px,473px,#FFFFFF);margin-left: 16px;box-shadow: 5px 5px 12px #C4C4C4;
                .news-center3{@include whb(100%,152px,#895ea3);padding-top: 15px;position: relative;
                        .backgrond3{@include whb(53px,53px,url(../img/index/news-pic3.png));margin: 0 auto;}
                                p{ text-align: center;line-height: 33px;color: #f6f6f6;font-size:$font16; }
                        .underline2{width: 106px; border: 1px solid #f6f6f6;margin: 0 auto;}}
                .news-center3::after{@include after(absolute,-21px,50%,-21px,block,21px #895ea3 solid,21px solid transparent,21px solid transparent);content: '';}
                .imformation-img{@include wh(298px,125px);margin: 0 auto;margin-top: 49px;
                        img{@include wh(100%,100%)}}
                .imformation-text{@include wh(206px,35px);font-size: 12px; margin: 0 auto; margin-top: 59px;position: relative;
                        .left-f{position: absolute;display: block;width: 10px;height: 10px;font-size: 25px;font-weight: bolder;color: #dbdade;left: -44px; top: -25px;}
                        .right-f{position: absolute;display: block;width: 10px;height: 10px; font-size: 25px;font-weight: bolder;color: #dbdade;right: -44px;top: 24px;}}}
}//product的                            


/*关于我们*/
.about{width: 100%;
        .about-tittle{@include wh(274px,43px); 
                margin: 0 auto;
                text-align: center;
                position: relative;
                margin-top: 59px;
                line-height: 32px;
                    small{ position: absolute;
                        background:#f6f6f6 ;
                        left: 88px;
                        top:24px}};                  
        .about-contant{width: 100%;
                height: 343px;
                margin-top: 52px;
                background: url(../img/index/bg_b.png);
                    .about-contant-text{@include wh(928px,150px);margin: 0 auto;
                                    p{color: #5e5f60;
                                       font-size: $font14;;
                                        text-align: center;
                                        text-indent: 2em;
                                        line-height: 24px;
                                        padding-top: 48px;}}
        .about-contant-img{@include whb(1052px,168px,#FFFFFF);
                margin: 0 auto;
                overflow: hidden;
                border: 1px solid #FFFFFF;
                    ul li{float:left ;
                          margin-left: 10px;}
                     img{margin-top: 5px;}
                    li:first-child{margin-left: 1px;
                        }}
             }}
     
     
/*练习我们*/

.contact{ width:100%;
    background: #f6f6f6;
    position: relative;
    padding-top: 25px;
        .contact-tittle{@include wh(274px,106px);
            margin: 0 auto;
            text-align: center;
            position: relative;
            line-height: 32px;
                small{position: absolute;
                    background:#f6f6f6 ;
                    left: 88px;
                    top:24px}}}
.contact-contant{width: 100%;
                height: 484px;
                margin-top: 20px;
                .contact-all-ways{@include wh(1074px,484px);
                    margin: 0 auto;
                    position: relative;
                    .contact-ways{@include wh(432px,484px);position: relative;
                            .all-ways{@include wh(144px,188px);border:solid 1px #ebebeb;
                                .all-ways-one{@include wh(126px,125px);border: 9px solid #FFFFFF;
                                        img{ @include wh(100%,100%);}}
                                span{display: block;@include wh(109px,333px);
                                     margin: 0 auto;
                                    text-align: center;
                                    font-size: $font12;
                                    line-height: 20px;}}
                        
                            .ways-ul{position: absolute;
                                    display: block;
                                    left: 135px;
                                    line-height: 33px;
                                    @include wh(265px,158px);
                                    float: left;
                                    margin-left: 28px;
                                        ul li a{font-size:$font14;
                                            color: #8c8c8c;
                                            margin-left: 14px;}}
                            .map{@include wh(100%,195px);height: 195px;
                                 margin-top: 40px;}}
                .other{position: absolute;
                @include wh(604px,484px);
                        top: 0;
                        right:0px;
                           .other-one form span{line-height: 40px;
                                font-size: $font14;
                                color: #3c9cd3;}
                            .other-one input{@include whb(603px,34px,#f9f8f8);
                                border: dotted 1px #8c8c8c;}
                            .other-one form input[type="submit"]{
                                @include whb(94px,34px,#3c9cd3);
                                margin-top: 20px;
                                color: $balck;}
                            .other-one textarea{@include whb(603px,102px,#f9f8f8);resize: none;
                                border: 1px dotted;}}}}
footer{width: 100%;
        .bottom-first{background: #3c9cd3;
            height: 102px;
            line-height: 40px;
                 span{@include wh(196px,21px);
                    display: block;
                    font-size: $font14;
                    margin: auto auto;
                    padding-top: 14px;
                    color: #F6F6F6;
                        a{margin-left: 10px;
                                img:last-child{ margin-left: 22px;}}}
                p{text-align: center;
                    font-size:$font14;
                    color: #F6F6F6;}}
        .bottom-second{ background: #1c1b29;
                        height: 35px;
                    p{text-align: center;
                            font-size: 10px;
                            color:#5E5F60 ;
                            line-height: 35px;
}}}

}//WEB的